<template>
	<view class="container">
		<view class="header">
			<image v-if="userInfo.avatarUrl" :src="userInfo.avatarUrl" class="img"></image>
			<image v-else src="https://hr-api.lanbeiduo.com/api/file/download/7iIOBILDAM_noBody.png" mode="" class="img">
			</image>
			<view class="info">
				<view class="name">
					{{userInfo.nickName}}
				</view>
				<view class="desc">
					暂未开通会员
				</view>
			</view>
		</view>
		<swiper class="swiper" :current="current" @change="changeSwiper" next-margin="30px">
			<swiper-item class="swiper-item" v-for="(item,index) in vipList" :key="index">
				<view class="item1">
					<view class="top">
						<view class="info">
							<view class="name">
								{{item.name}}
							</view>
							<view class="text">
								尊贵身份 会员特享
							</view>
						</view>
						<image src="https://hr-api.lanbeiduo.com/api/file/download/RyJvZ0FhAP_会员详情-会员卡.png" class="img">
						</image>
					</view>
					<view class="bottom">
						<view class="left">
							<view class="flex">
								<text class="num">2</text><text style="margin: 0 4rpx;">项</text>
								<u-icon name="arrow-right" color="#955D24"></u-icon>
							</view>
							<view class="">
								会员权益
							</view>
						</view>
						<view class="right">
							<view class="item">
								<image src="https://hr-api.lanbeiduo.com/api/file/download/RyJvZ0FhAP_会员详情-会员卡.png"
									mode="" class="img"></image>
								<view class="">
									会员标签
								</view>
							</view>
							<view class="item">
								<image src="https://hr-api.lanbeiduo.com/api/file/download/o3ZbYaGLUF_打折.png" mode=""
									class="dazhe"></image>
								<view class="">
									钓鱼费打折
								</view>
							</view>
						</view>
					</view>
				</view>
			</swiper-item>
			<!-- <swiper-item class="swiper-item">
			<view class="item1">
				<view class="top">
					<view class="info">
						<view class="name">
							黄金会员
						</view>
						<view class="text">
							尊贵身份 会员特享
						</view>
					</view>
					<image src="https://hr-api.lanbeiduo.com/api/file/download/RyJvZ0FhAP_会员详情-会员卡.png" class="img">
					</image>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="flex">
							<text class="num">2</text><text style="margin: 0 4rpx;">项</text>
							<u-icon name="arrow-right" color="#955D24"></u-icon>
						</view>
						<view class="">
							会员权益
						</view>
					</view>
					<view class="right">
		                    <view class="item">
		                    	<image src="https://hr-api.lanbeiduo.com/api/file/download/RyJvZ0FhAP_会员详情-会员卡.png" mode="" class="img"></image>
								<view class="">
									会员标签
								</view>
		                    </view>
							<view class="item">
								<image src="https://hr-api.lanbeiduo.com/api/file/download/o3ZbYaGLUF_打折.png" mode="" class="dazhe"></image>
								<view class="">
									钓鱼费8折
								</view>
							</view>
					</view>
				</view>
			</view>
		</swiper-item> -->
		</swiper>
		<view class="content">
			<view class="title">
				权益说明:
			</view>
			<view v-if="vipList.length>0" class="" v-html="vipList[current].description">
				
			</view>
			<!-- <view class="">
				1.开通会员金额全额到账，该笔开通金额享受当前会员折扣价;
			</view>
			<view class="">
				2.会员金额不可与微信支付金额一起使用;
			</view> -->
		</view>
		<view class="footer safe-padding">
			<view class="left">
				<text>金额:</text>
				<text class="num">{{vipList[current]?.price/100||0}}</text>
				<text class="unit">元</text>
			</view>
			<view class="btn" @click="open">
				立即开通
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onMounted } from 'vue'
	import { $http, getAppId, toLogin } from "@/common"
	import NavigationBar from "@/components/NavigationBar/NavigationBar.vue"
	import {
		onInit,
		onLoad,
		onReady,
		onShow,
		onHide,
		onUnload,
		onResize,
	} from '@dcloudio/uni-app'
	const vipList = ref([])
	const userInfo = ref({})
	onLoad(() => {
		$http.get('userVip').then(res => {
			vipList.value = res
		})
		if(uni.getStorageSync('userInfo')&&JSON.parse(uni.getStorageSync('userInfo'))){
			userInfo.value = JSON.parse(uni.getStorageSync('userInfo'))
		}
	})
	onShow(() => {

	})
	const nickName = ref('')
	const avatarUrl = ref('https://hr-api.lanbeiduo.com/api/file/download/f5rdqmhEOh_noBody.png')
	const current = ref(0)
	function changeSwiper(e) {
		console.log(e.detail.current, 'eeeeeeeeeee')
		current.value = e.detail.current
	}
	
	function open(){
		$http.post('openVip',{gearIds:vipList.value[current.value].id}).then(result => {
			wx.requestPayment({
				timeStamp: result.pay.timeStamp,
				nonceStr: result.pay.nonceStr,
				package: result.pay.package,
				signType: result.pay.signType,
				paySign: result.pay.paySign,
				success(res) {
					console.log(res)
					if (res.errMsg == "requestPayment:ok") {
						uni.showToast({
							title: '支付成功'
						})
						console.log('支付成功', res)
						setTimeout(()=>{
							uni.switchTab({
								url:'/pages/my/my'
							})
						},500)
					} else {
						uni.showToast({
							title: '支付失败'
						})
						console.log('支付失败')
					}
				},
				fail(res) {
					uni.showToast({
						title: '支付失败'
					})
				}
			})
		})
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #B5DCFD;

		.header {
			display: flex;
			align-items: center;
			padding: 40rpx 20rpx 20rpx 20rpx;

			.img {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 50%;
			}

			.info {
				.name {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

				.desc {
					color: #696969;
				}
			}
		}

		.swiper {
			padding: 10px;

			.item1 {
				background-color: #FFE081;
				width: 96%;
				border-radius: 30rpx;
				background: linear-gradient(to right, #FFF5D7, #FFE9A5);
				color: #955D24;
				padding: 20rpx 26rpx;
				// box-shadow: 3px 5px 2px 2px rgba(255,233,165,0.3);
				box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);

				.top {
					display: flex;
					justify-content: space-between;

					.info {
						.name {
							color: #F5891F;
							font-size: 36rpx;
							font-weight: bold;
						}
					}

					.img {
						width: 100rpx;
						height: 100rpx;
						transform: rotate(-10deg);
						position: relative;
						top: -20rpx;
						right: 10rpx;
					}
				}
			}

			.item2 {
				height: 400rpx;
				background: linear-gradient(to right, #DEF2FE, #ABDEFE);
				width: 95%;
				border-radius: 20rpx;
			}

			// .swiper-item {
			// 	width: 90% !important;
			// }

			.swiper-item2 {
				width: 100% !important;
			}
		}

		.bottom {
			margin-top: 36rpx;
			display: flex;

			.left {
				border-right: 2rpx solid #FE707B;
				padding-right: 20rpx;
				margin-right: 20rpx;

				.flex {
					display: flex;
					align-items: center;
				}

				.num {
					font-size: 34rpx;
					font-weight: bold;
				}
			}

			.right {
				display: flex;

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 20rpx;

					.img {
						width: 40rpx;
						height: 40rpx;
						margin-bottom: 4rpx;
					}
				}

				.dazhe {
					width: 60rpx;
					height: 40rpx;
					margin-bottom: 4rpx;
				}
			}
		}

		.content {
			padding: 20rpx 50px 20rpx 20rpx;
			color: #696969;
			line-height: 2;

			.title {
				margin-bottom: 20rpx;
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-color: #fff;
			padding:20rpx 20rpx 30rpx 20rpx;

			.left {
				.num {
					color: #FF9A28;
					font-size: 34rpx;
				}

				.unit {
					color: #FF9A28;
				}
			}

			.btn {
				width: 280rpx;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 36rpx;
				color: #fff;
				background-color: #12B7F5;
				border-radius: 14rpx;
			}
		}
	}
</style>